@charset "utf-8";
/* CSS Document */
body {
  position:relative;
  background:#99c822;
}

.container {
  position:relative;
  width:100%;
  max-width:640px;
}

.index {
  background:url(images/index_bg.jpg) no-repeat;
  background-size:100% ;
  min-height:480px;
}

.rule {
  background:url(images/rule_bg.jpg) no-repeat;
  background-size:100% ;
  min-height:480px;
}

.result {
  background:url(images/result_bg.jpg) no-repeat;
  background-size:100% ;
  min-height:480px;
}

.index-btn-line {
  position:absolute;
  width:90%;
  text-align:center;
  bottom:25px;
}

.img-btn {
  display:inline-block;
  width:80px;
  height:37px;
  text-indent:-9999px;
}

.img-btn.index-rule-btn {
  background:url(images/index_rule_btn.png) 50% 60% no-repeat;
  background-size:100% ;
}

.img-btn.index-start-btn {
  width:104px;
  height:37px;
  background:url(images/index_dig_btn.png) 50% 100% no-repeat;
  background-size:100%;
}

.img-btn.index-my-btn {
  background:url(images/index_my_btn.png) 50% 60% no-repeat;
  background-size:100% ;
}

.rule-btn-line {
  text-align:center;
  margin-top:16px;
  margin-bottom:30px;
}

.img-btn.rule-my-award-btn {
  width:83px;
  height:33px;
  background:url(images/rule_my_award_btn.png) 50% 50% no-repeat;
  background-size:100% ;
  margin-right:50px;
}

.img-btn.rule-back-btn {
  width:83px;
  height:33px;
  background:url(images/rule_back_btn.png) 50% 50% no-repeat;
  background-size:100% ;
}

.rule-text-line {
  position:absolute;
  width:90%;
  text-align:center;
  top:110px;
}

.rule-text-line .content {
  display:inline-block;
  color:#333333;
  width:180px;
  height:110px;
  overflow:scroll;
  font-size:11px;
  text-align:left;
}

.rule-award-line {
  position:absolute;
  width:90%;
  min-height:100px;
  top:285px;
}

.rule-award-line .banner {
  position:absolute;
  top:-20px;
  width:100%;
  height:40px;
  background:url(images/rule_tips.jpg) 50% 50% no-repeat;
  background-size:70%;
}

.rule-award-line .content {
  border:2px solid #e80072;
  background:#FFFFFF;
  border-radius:6px;
  font-size:11px;
  padding:16px 10px;
}

.rule-award-line .content th , .rule-award-line .content td {
  text-align:center;
}

.rule-award-line .content th , .rule-award-line .content img {
  width:70px;
}

.rule-award-line .content a {
  display:inline-block;
  width:58px;
  height:19px;
  background:url(images/rule_take_award_active_btn.png) 50% 50% no-repeat;
  background-size:100%;
  text-indent:-9999px;
}

.rule-award-line .content .disabled {
  background:url(images/rule_take_award_btn.png) 50% 50% no-repeat;
}

.result-icon-line {
  position:absolute;
  width:90%;
  text-align:center;
  top:65px;
}

.result-icon-line img {
  width:80px;
  height:80px;
  border-radius:40px;
}

.result-crown-line {
  position:absolute;
  width:90%;
  text-align:center;
  top:30px;
}

.result-crown-line img {
  width:72px;
  height:47px;
  margin-left:20px;
}

.result-name-line {
  position:absolute;
  width:90%;
  text-align:center;
  top:155px;
}

.result-point-line {
  position:absolute;
  width:40%;
  text-align:center;
  top:176px;
  margin-left:97px;
  color:#FF0000;
  font-weight:bold;
  font-size:12px;
}

.result-list-line {
  position:absolute;
  width:90%;
  height:100px;
  font-size:9px;
  text-align:center;
  top:236px;
  
}

.result-list-line table {
  display:inline-block;
  width:80%;
}

.result-list-line .list-data {
  width:90%;
  height:100px;
  overflow:scroll;
  margin-left:10px;
}

.result-list-line img {
  height:24px;
  width:24px;
  border-radius:12px;
}

.result-take-line {
  position:absolute;
  width:90%;
  text-align:center;
  bottom:45px; 
}

.result-take-line .result-exchange-btn {
  width:90px;
  height:70px;
  background:url(images/result_take_award_btn.png) no-repeat;
  background-size:100%;
}

.result-btn-line {
  position:absolute;
  width:90%;
  text-align:center;
  bottom:10px;  
}

.result-btn-line .result-assist-btn {
  width:83px;
  height:28px;
  background:url(images/result_assist_btn.png) no-repeat;
  background-size:100%; 
}

.result-btn-line .result-share-btn {
  width:83px;
  height:28px;
  background:url(images/result_share_btn.png) no-repeat;
  background-size:100%; 
}

.result-btn-line .result-play-btn {
  width:83px;
  height:28px;
  background:url(images/result_play_btn.png) no-repeat;
  background-size:100%; 
}

.modal-bg {
  position:absolute;
  width:100%;
  height:100%;
  z-index:100;
  background:#000000;
  opacity:0.7;
  top:0px;
}

.share-modal {
  display:none;
  position:absolute;
  text-align:right;  
  width:100%;
  height:100%;
  top:0px;
  z-index:150;
}

.share-modal img {
  width:70%;
}

.good-card-modal {
  display:none;
  position:absolute;
  width:260px;
  height:320px;
  background:url(images/result_good_bg.png) no-repeat;
  background-size:100%;
  z-index:150;
}
.good-card-modal .point{
  position:absolute;
  color:#92c506;
  left:60px;
  bottom:22px;
  font-size:26px; 
}

.bad-card-modal {
  display:none;
  position:absolute;
  width:260px;
  height:320px;
  background:url(images/result_bad_bg.png) no-repeat;
  background-size:100%;
  z-index:150;
}

.bad-card-modal .point{
  position:absolute;
  color:#e60178;
  left:60px;
  bottom:22px;
  font-size:26px;
  
}

.close-btn {
  display:block;
  top:-13px;
  right:-13px;
  position:absolute;
  width:26px;
  height:26px;
  background:url(images/modal_close_btn.png) no-repeat;
  background-size:100%;
  z-index:150;
  text-indent:-9999px;
}

.my-award-modal {
  display:none;
  position:absolute;
  width:260px;
  height:320px;
  background:url(images/rule_my_award_modal_bg.png) no-repeat;
  background-size:100%;
  z-index:150;
}

.my-award-modal table {
  position:absolute;
  width:90%;
  height:60px;
  top:80px;
  left:20px;
}

.take-award-modal {
  display:none;
  position:absolute;
  width:260px;
  height:320px;
  background:url(images/rule_take_award_modal_bg.png) no-repeat;
  background-size:100%;
  z-index:120;
}

.take-award-modal .rule-share-btn {
  display:block;
  position:absolute;
  width:100%;
  height:60px;
  bottom:0px;
  text-indent:-9999px;
}

.take-award-modal #award_name {
  position:absolute;
  width:60%;
  height:60px;
  text-align:center;
  color:#9cca23;
  top:68px;
  left:-10px;
  font-size:18px;
  font-weight:bold;
}


